<template>
  <div class="list-table" style="height: 100%">
    <el-row style="margin-bottom: 20px">
      <el-col :span="12">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="easyReportData.data" class="nowrapTable showOnlyLine sortTable" border>
      <el-table-column
        v-for="(parentCol) in easyReportData.column"
        :key="parentCol.prop"
        :label="parentCol.label"
        :prop="parentCol.prop"
        v-bind="parentCol"
        align="center"
      >
        <template v-if="parentCol.children && parentCol.children.length > 0">
          <el-table-column
            v-for="(childrenCol) in parentCol.children"
            :key="childrenCol.prop"
            :label="childrenCol.label"
            :prop="childrenCol.prop"
            :width="childrenCol.width"
            show-overflow-tooltip
          >
            <template slot="header">
              <span class="fieldName">
                <p :title="childrenCol.label">{{ childrenCol.label }}</p>
              </span>
              <field-query :field-val="childrenCol" attr-name="prop" @queryData="queryData" />
            </template>
            <template slot-scope="scope">
              <span v-if="childrenCol.type === 'JE'">{{ moneyFormat(scope.row[childrenCol.prop]) }}</span>
              <span v-else-if="childrenCol.type === 'RQ'">{{ parseTime(scope.row[childrenCol.prop]) }}</span>
              <template v-else-if="scope.row[parentCol['prop']+'#children'] && !scope.row[childrenCol.prop]">
                <p v-for="(item,i) in scope.row[parentCol['prop']+'#children']" :key="i" class="row">{{ item[childrenCol.prop] ? item[childrenCol.prop] : '&nbsp;' }}</p>
                <!-- eslint disable -->
                <p v-for="n in (scope.row['col'] - scope.row[parentCol['prop']+'#children'].length)" :key="n" class="row">&nbsp;</p>
              </template>
              <span v-else>{{ scope.row[childrenCol.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { buildEasyReport } from '@/api/dev/jmf/jmfReport'
import { getJmfReport } from '@/api/dev/jmf/jmfReport'
import FieldQuery from '@/views/system/search/fieldQuery'
export default {
  components: { FieldQuery },
  data() {
    return {
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      easyReportData: {
        column: [],
        data: []
      },
      searchQueryList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getJmfReport(this.$route.query.reportId).then(response => {
        if (response.code === 200) {
          this.queryParams.field = JSON.parse(response.data.reportData)
          this.queryParams.packageCode = response.data.packageCode
          this.queryParams.filter = JSON.parse(response.data.filter)
          buildEasyReport(this.queryParams).then(res => {
            this.easyReportData = res.rows
            this.total = res.total
            this.loading = false
          })
        }
      })
    },
    queryData(data) {
      this.loading = true
      this.$nextTick(() => {
        var searchQueryTempList = []
        this.searchQueryList.forEach(item => {
          if (item.fieldName !== data.fieldName && data.value && data.value !== '') {
            searchQueryTempList.push(item)
          }
        })
        this.searchQueryList = searchQueryTempList
        if (data && data.value && (data.value !== '' || data.conditions !== '')) {
          this.searchQueryList.push(data)
        }
        this.queryParams.search = this.searchQueryList
        this.getList()
      })
    },
    exportHandle() {
      this.downLoadExcel('/report/jmfReport/exportEasyReport', { reportId: this.$route.query.reportId }).then(() => {
        this.msgSuccess(this.$t('导出成功'))
      })
    }
  }
}
</script>

<style scoped>

</style>
